<template>
  <div class="box">
    <div class="message-left-box">
      <div class="message-left-avatar">
        <img class="avatar" :src="props.message.avatar" alt="avatar">
      </div>

      <div class="message-left-text">
        {{props.message.text}}
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
const props = defineProps({
  message: {
    required: true
  }
})
</script>

<style lang="less" scoped>
.box{
  height: auto;
  display: flex;
  align-items: start;
  width: 50%;
}
.message-left-box {
  width: auto;
  height: auto;
  min-width: 250px;
  min-height: 70px;
  padding:5px 10px;
  display: flex;
  align-items: center;
  max-width: 40%;

  .message-left-avatar {
    width: 50px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;

    .avatar {
      height: 50px;
      width: 50px;
      border-radius: 50%;
    }
  }

  .message-left-text{
    width: 100%;
    left: 80px;
    height: 100%;
    min-height: 50px;
    border-radius: 10px;
    margin-left: 10px;
    padding:5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    flex: 1;
    background:url("@/assets/icons/transparent-big.png");
  }
}
</style>